<template>
  <el-container class="layout-container-demo" style="height: 600px">
    <div class="example-pagination-block">
      <div class="example-demonstration">
        <el-container>
          <el-main>
            <el-scrollbar>
              <el-table
                :data="tableData"
                class="registration-table"
                height="500"
                style="width: 100%"
              >
                <el-table-column type="index" label="序号" sortable width="100" />
                <el-table-column prop="NAME" label="姓名" sortable width="160" />
                <el-table-column prop="AGE" label="年龄" sortable width="160" />
                <el-table-column prop="SEX" label="性别" sortable width="160" />
                <el-table-column prop="STATUS" label="接诊状态" sortable width="140" />
                <el-table-column prop="TIME" label="时间" sortable width="240" />
                <el-table-column width="200">
                  <template #default="scope">
                    <el-button
                      size="small"
                      @click="jumpToCurPatientRecord(scope.$index, scope.row)"
                      >接诊/查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-scrollbar>
          </el-main>
        </el-container>
      </div>
      <el-pagination
        background
        :page-size="pageSize"
        :pager-count="pagerCount"
        layout="prev, pager, next"
        :total="totalRecords"
        v-model:currentPage="currentPageNum"
        @click="getRegistrationList(currentPageNum)"
      />
    </div>
  </el-container>
</template>
<script>
import request from "@/utils/forward/request";

export default {
  name: "RegistrationList",
  props: {},

  data() {
    return {
      doctorId: this.$store.state.doctorOptions.doctorId,
      tableData: [],
      pageSize: 11,
      pagerCount: 10,
      totalRecords: 100,
      currentPageNum: 1,
    };
  },
  methods: {
    getRegistrationList(pageNum) {
      console.log(pageNum);
      this.loadPageData(pageNum);
    },
    async jumpToCurPatientRecord(index, row) {
      //1.根据病人挂号编号、医生ID创建病历，返回病历ID
      await request("post", "patientHistory/saveOrUpdateOnePatientHistory", {
        registrationId: row.ID,
      }).then((res) => {
        console.log("patientHistoryId:" + res.result);
        //2.将病历ID存到store
        this.$store.commit("doctorOptions/setPatientHistoryId", res.result);
      });
      //3.跳转到病历页面（不用管数据，路由跳转即可）
      this.$router.push({
        path: "record",
      });
    },
    loadPageData(currentPageNum) {
      const requestParams = {
        doctorId: this.doctorId,
        pageNum: currentPageNum,
        pageSize: this.pageSize,
      };

      request("post", "/registrationApi/getRegisterPageForDoctor", requestParams).then(
        (res) => {
          console.log(res);
          this.totalRecords = res.result.total;
          this.tableData = res.result.list;
          // const resultList = res.result.list;
          const that = this;
          this.tableData.forEach((e) => {
            e.TIME = that.$filters.dateFormat(e.TIME);
          });
          // this.tableData = resultList.map((e) => {
          //   return {
          //     ID: e.ID,
          //     AGE: e.AGE,
          //     NAME: e.NAME,
          //     ROW_ID: e.ROW_ID,
          //     SEX: e.SEX,
          //     STATUS: e.STATUS,
          //     TIME: that.$filters.dateFormat(e.TIME),
          //   };
          // });
        }
      );
    },
  },
  mounted() {
    this.loadPageData(1);
  },
};
</script>

<style>
.layout-container-demo .el-header {
  height: 20%;
  position: relative;
  background-color: rgb(174, 236, 235);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
</style>
